<template>
    <div class="dash">
        <div class="container">
            <el-container>
              <el-main width="100%">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-col :span="24">
                        <div class="sub-title">name</div>
                        <div class="sub-content">
                            {{form.name}}
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="sub-title">MAC address</div>
                        <div class="sub-content">
                            {{form.mac}}
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="sub-title">IP address</div>
                        <div class="sub-content">
                            {{form.address}}
                        </div>
                    </el-col>
<!--                     <el-col :span="24">
                        <div class="sub-title">family</div>
                        <div class="sub-content">
                            {{form.family}}
                        </div>
                    </el-col> -->
                    <el-col :span="24">
                        <div class="sub-title">gateway</div>
                        <div class="sub-content">
                            {{form.gateway}}
                        </div>
                    </el-col>
        <!--                     <el-col :span="24">
                                <div class="sub-title">internal</div>
                                <div class="sub-content">
                                    {{form.internal}}
                                </div>
                            </el-col> -->
                    <el-col :span="24">
                        <div class="sub-title">netmask</div>
                        <div class="sub-content">
                            {{form.netmask}}
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="sub-title">state</div>
                        <div class="sub-content" :class="class_state">
                            {{form.state}}
                        </div>
                    </el-col>
                        <!-- <el-button>取消</el-button> -->
                    <!-- </el-form-item> -->
                </el-form>
            </el-main>
              <!-- <el-main>Main</el-main> -->
            </el-container>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'baseform',
        data: function(){
            return {
                class_state: '',
                form: {
                    name: 'IC-MS',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: true,
                    address:"10.0.0.1"
                }
            }
        },
        mounted() {
            var that = this;
            this.getData();
        },
        methods: {
            onSubmit() {
                this.$message.success('提交成功！');
            },

            getData(){
                let self = this;   
                let url = new URL("http://" + location.hostname + ":3000/netstat");
                fetch(url,
                    {
                        method:"GET",
                         headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(function(res){
                        return res.json()
                    }).then(function(res){
                        if(res[0]["state"] != "down"){
                            self.class_state = "state_up"
                        }else{
                            self.class_state = "state_down"
                        }
                        self.form = res[0]
                    })
            }
        }
    }
</script>
<style>
    .dash .el-main {
        color: #333;
        line-height: 20px;
    }
    .dash .sub-title{
        font-size: 14px;
        font-family: 微软雅黑;
        font-weight: bold;
        color: #767576;
        width: 180px;
        float: left;
    }
    .dash .sub-content{
        font-size: 14px;
        font-family: 微软雅黑;
        font-weight: bold;
        color: #767576;
        float: left;
    }
    .dash .container .el-col{
        padding: 10px 0px;
    }
    .dash .el-button{
        margin: 10px;
    }
    .state_up{
        color: #ffffff!important;
        background: #00FF54;
        padding:5px 20px;
    }
    .state_down{
        color: #ffffff!important;
        background: #FF7700;
        padding:5px 20px;
    }
</style>